<template>
    <div>
        <div class="container">
            <div class="clearfix">
                <div class="schart-box fl">
                    <div id="pricecharts" class="echarts"></div>
                </div>
                <div class="schart-box fl">
                    <div id="main" class="echarts"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getDay,getDay1, getNowMonth, getLastMonth } from '@/unit/date.js';

export default {
    name: 'BaseEcharts',
    data() {
        //定义vue内部变量
        return {
            priceEcharts: null, //销售额图表
            NumberEcharts: null, //销售数量图表
            weekdays: [] ,//近一周日期数组
            priceListData:[], //价格报表数据
            sumListData:[], //销售数量报表数据
        };
    },
    created() {
        //页面加载过程中执行
    },
    mounted() {
        //初始化，页面完全加载后执行
        this.init();
    },
    methods: {
        //定义方法
        async init() {
            //初始化
            this.priceEcharts = echarts.init(document.getElementById('pricecharts'));
            this.NumberEcharts = echarts.init(document.getElementById('main'));

            //请求后端数据
            let res = await this.$http.get("getEchartsData");
            this.weekdays = res.data.days;
            this.priceListData = res.data.totalPriceList;
            this.sumListData = res.data.sum;

            console.log(this.sumListData);

            //销售额数据初始化
            let option1 = {
                title: {
                    text: '近一周的销售额'
                },
                xAxis: {
                    type: 'category',
                    data: this.weekdays
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.priceListData,
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            //销售数量数据初始化
            let option2 = {
                title: {
                    text: '近一周的销售数量'
                },
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['days', '销售数量'],
                    source:this.sumListData
                    //{days:'日期',销售数量:'价格'}
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }]
            };

            //绑定数据进行显示
            this.priceEcharts.setOption(option1);
            this.NumberEcharts.setOption(option2);
        },
        getdays(days){
            //参数days为取多少天
            let mydays = (-days);
            for(;;mydays++){
                if(mydays==0){
                    return;
                }
                //向数组里增加日期
                this.weekdays.push(getDay1(mydays));
            }
        }
    }
};
</script>

<style>
.echarts {
    width: 700px;
    height: 400px;
}

.schart-box {
    display: inline-block;
    margin: 20px;
}

.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>